<template>
  <div>
    <el-container>
      <el-header><div style="border: 1px;">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

          <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
          <el-menu-item index="2" style="margin-left: 10px;font-size: 18px" @click="toindex">首页</el-menu-item>
          <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
          <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
          <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px">视频</el-menu-item>
          <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
          <el-menu-item index="7">
            <el-input  style="width: 200px ;"
                       placeholder="搜索COS、视频、用户..."
                       v-model="input"
                       clearable >
            </el-input>  <el-button @click="sousuo" style="height: 39px;" con="el-icon-search">搜索</el-button>
          </el-menu-item>

          <el-menu-item index="8"  v-if="disUser" style="margin-left: 65px;font-size: 18px" >
            <template>
              <div class="demo-type">
                <el-avatar :size="50" :src="user.pic" @error="errorHandler">
                  <img @click="tooneself" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </div>
            </template>
          </el-menu-item>
          <el-menu-item index="9"  v-if="disUser" style="margin-left: 5px;font-size: 18px" @click="outlogin()">退出</el-menu-item>
          <el-menu-item index="8" v-if="disUser1" style="margin-left: 65px;font-size: 18px" @click="tologin()">登录</el-menu-item>
          <el-menu-item index="9"  v-if="disUser1" style="margin-left: 5px;font-size: 18px" @click="toregist">注册</el-menu-item>
          <el-dropdown index="10" style="margin-left: 10px ;" >
            <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
              <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus">图片</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus"><router-link to="/mvUpload">视频</router-link>视频</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-menu>
      </div></el-header>
      <el-row style="background-color: bisque">
        <el-col :span="18" style="margin-top: 30px">
          <div class="grid-content bg-purple" style="margin-left:10%;width: 80%;background-color: #ffffff">
            <div >
              <img style="width: 100%;height: 200px"  :src="user.pic1">
            </div>
            <div style="margin-top: -100px;margin-left: -550px">
              <el-avatar :size="150"  :src="user.pic" ></el-avatar>
              <br>
              <el-button round style="background-color: #ff6fa2" @click="handleClicks">编辑资料</el-button>
            </div>


            <!--分享内容区域-->
<hr style="width: 800px" />

                <div class="grid-content bg-purple" >

                  <div style="margin-top: 40px;margin-left: -135px" >
                    <!--边框：border: 5px yellowgreen solid ; border: 1px red solid;-->

                    <!--<div style="width: 1100px">-->
                      <el-row>

                        <!--<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                        <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
                      </ul>-->
                        <el-col :span="24">
                          <div class="grid-content bg-purple-dark" style="width: 100%;margin-left: 80px">
                            <el-row style="margin-left: 50px">

                              <el-col :span="6" v-for="(o, index) in shareList" :key="o.id" :offset="index > 0 ? 1 : 1">
                                <el-card :body-style="{ padding: '0px' }" >
                                  <el-button class="button" @click="forwarding(o.id)"><el-image style="height: 250px" :src="o.pic1" class="image"></el-image></el-button>
                                  <div style="padding: 10px;">
                                    <span>{{o.share_name}}</span>
                                    <div class="bottom clearfix" style="margin-left: 0px">
                                      <el-button type="text" style="font-size: 14px; " class="button" @click="good(o.id)"><i class="el-icon-lollipop" ></i>{{ o.good }}点赞</el-button>
                                      <el-button type="text" style="font-size: 14px; " class="button" @click="comments(o.id)"><i class="el-icon-chat-line-round" ></i>评论</el-button>
                                      <el-button type="text" style="font-size: 14px; " class="button" @click="forwarding(o.id)"><i class="el-icon-position" ></i>转发</el-button>
                                      <el-button type="text" style="font-size: 14px; " class="button" @click="collection(o.id)"><i class="el-icon-star-off" ></i>收藏</el-button>
                                      <i class="el-icon-delete" @click="deleteOne(o.id)"></i>
                                    </div>
                                  </div>
                                </el-card>
                              </el-col>

                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                <!--</div>-->
          </div></el-col>

        <!--右侧用户粉丝栏-->
        <el-col :span="6">
          <div class="grid-content bg-purple-light" style="width: 300px;height: 300px;margin-top: 80px;background-color:#ffffff; ">
            <span style="font-size: 18px;margin-left: -120px">我关注的用户</span>
            <br>
            <br>
            <div style="width: 200px;height: 50px" v-for="o in fansList" :key="o">
              <div  style="" class="block"><el-avatar :size="40" :src="o.pic"></el-avatar>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="" style="font-size: 18px;">{{o.name}}</a></div>
            </div>


        </div>
        </el-col>
      </el-row>


      <!--<el-container>-->
        <!--<el-aside width="200px">-->
         <!---->
        <!--</el-aside>-->
        <!--&lt;!&ndash;主体区域&ndash;&gt;-->
        <!--<el-main>-->
  <!---->

        <!--</el-main>-->
      <!--</el-container>-->
    </el-container>

    <!--对话弹出框-->
    <el-dialog
      title="资料修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
        <span>
             <el-form ref="form" :model="user" label-width="80px">
               <el-form-item label="序号">
            <el-input v-model="user.id" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="user.userName" ></el-input>
          </el-form-item>
               <el-form-item label="修改密码">
            <el-input type="password" v-model="user.password" ></el-input>
          </el-form-item>
                <el-form-item label="邮箱">
            <el-input v-model="user.email" ></el-input>
          </el-form-item>
                <el-form-item label="昵称">
            <el-input v-model="user.name" ></el-input>
          </el-form-item>
                 <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/bcy-user/user/uploadPic"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
          </el-form-item>
               <el-form-item label="壁纸">
                 <el-upload
                   class="avatar-uploader"
                   action="http://localhost/bcy-user/user/uploadPic"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess1"
                   :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
          </el-form-item>

        </el-form>

        </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="moSunbmit()">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios';
  axios.defaults.withCredentials=true
    export default {
        name: "oneself",
      data() {
        return {
           user:{},
          disUser:false,
          disUser1:true,
          fansList: [],
          input:'',
          activeIndex: '1',
          shareList:[],
          dialogVisible:false,
          imageUrl: '',
          imageUrl1: ''
        };
      },
      methods: {
          handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.user.pic=res;
        },
        tologin:function(){
          this.$router.push("/login")
        },outlogin:function(){
          axios.get("http://localhost/bcy-user/user/outlogin").then(res=>{
            if (res.data.code==200){
              this.$message({
                type: 'success',
                message: '退出成功!',
              });
              this.$router.push("/login")
            }
          })

        }, toregist:function(){
          this.$router.push("/regist")
        },handleAvatarSuccess1(res, file) {
          this.imageUrl1 = URL.createObjectURL(file.raw);
          this.user.pic1=res;
        },
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return  isLt2M;
        },
        moSunbmit:function () {
          this.$confirm('是否提交修改, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(this.user)
            //请求后台进行修改数据
            axios.post("http://localhost/bcy-user/user/updateUser",this.user).then(res=> {
              //关闭模态窗口
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.findUserById();
            })
            this.dialogVisible=false;
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        }, handleClicks() {
          this.dialogVisible=true;
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        toindex:function(){
          this.$router.push("/index")
        },
        sousuo:function(){
          axios.get("http://localhost/shop-search/search/findAll/"+this.input).then(res=>{
            if (res.data.code==200){
              this.shareList=res.data.data;
            }
          })
        },
        tooneself:function () {
          this.$router.push("/oneself")
        },
        errorHandler() {
          return true
        },
        findUserById:function(){
          axios.get("http://localhost/bcy-user/user/findUserById").then(res=>{
            if (res.data.code==200){
              this.user=res.data.data;
              this.disUser=true;
              this.disUser1=false;
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }else {
              alert(res.data.message)
            }
          });
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        findFansAll:function () {
          axios.get("http://localhost/bcy-user/user/findFansAll").then(res=>{
            if (res.data.code==200){
              this.fansList=res.data.data;
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }else {
              alert(res.data.message)
            }
          })
        },
        findUserShareByUid:function () {
          axios.post("http://localhost/bcy-user/user/findUserShareByUid").then(res=>{
            if (res.data.code==200){
            this.shareList=res.data.data;
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }else {
              alert(res.data.message)
            }
          })
        },
        good:function (id) {
          alert(id);
          axios.post("http://localhost/bcy-picshare/picShare/addgood",{id:id}).then(res=>{
            if (res.data.code==200){
            }else if(res.data.code==206){
              alert(res.data.message)
              this.$router.push("login")
            }
          })
        },
        comments:function (id) {
          alert("谢谢评论")
        },
        forwarding:function (id) {
          alert("谢谢转发")
        },
        collection:function (id) {
          alert("谢谢收藏")
        },deleteOne:function (id) {
          this.$confirm('确认删除？')
            .then(_ => {
              axios.post("http://localhost/bcy-user/user/delePicShare",{id:id}).then(res=>{
                if (res.data.code==200){
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                  });
                  this.findUserShareByUid();
                }else if(res.data.code==206){
                  alert(res.data.message)
                  this.$router.push("login")
                }
              })
            })
            .catch(_ => {});

        }
      },
    mounted() {
        this.findUserById();
           this.findFansAll();
       this.findUserShareByUid();
    }
    }
</script>

<style scoped>
  .el-header, .el-footer {

    color: #333;
    text-align: center;
    line-height: 60px;
  }
  /*.el-row {*/
    /*margin-bottom: 20px;*/
  /*&:last-child {*/
     /*margin-bottom: 0;*/
   /*}*/
  /*}*/
  .el-col {
    border-radius: 4px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .bg-purple {
  }
  .bg-purple-light {
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
</style>
